<script setup>
    import {ref as 响应} from 'vue'

    const 间距 = 响应(20)
</script>

<template>
    <div class="基础用法">
        <h1>基本用法</h1>
        <el-space wrap="">
            <el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
                <template #header="">
                    <div class="卡片头部">
                        <span>卡片名称</span>
                        <el-button class="button" text="">操作按钮</el-button>
                    </div>
                </template>
                <div v-for="o in 4" :key="o" class="text item">
                    {{ '列表条目' + o }}
                </div>
            </el-card>
        </el-space>
    </div>

    <div class="垂直布局">
        <h1>垂直布局</h1>
        <el-space direction="vertical">
            <el-card v-for="i in 2" :key="2" style="width: 250px">
                <template #header="">
                    <div class="卡片头部">
                        <span>卡片名称</span>
                        <el-button text="">操作按钮</el-button>
                    </div>
                </template>
                <div v-for="o in 4" :key="o">
                    {{ '列表条目' + o }}
                </div>
            </el-card>
        </el-space>
    </div>

    <div class="自定义间距">
        <el-slider v-model="间距"></el-slider>
        <el-space wrap="" :size="间距">
            <el-card v-for="i in 2" :key="i" style="width: 250px">
                <template #header="">
                    <div class="卡片头部">
                        <span>卡片名称</span>
                        <el-button text="">操作按钮</el-button>
                    </div>
                </template>
                <div v-for="o in 4" :key="o">
                    {{ '列表项目' + o }}
                </div>
            </el-card>
        </el-space>
    </div>
</template>

